<template>
  <div class="detail_page">
    <!-- <div @click="handle_cli">详情</div> -->
    <div class="page_content">
      <div class="info_box">
        <div>
          <div class="title_text">分厂/车间</div>
          <div class="title_val">802</div>
        </div>
        <div>
          <div class="title_text">工作方式</div>
          <div class="title_val">现场检查</div>
        </div>
        <div>
          <div class="title_text">开展情况(已完成/总计)</div>
          <div class="title_val">12/35</div>
        </div>
        <div>
          <div class="title_text">结果统计(合格/不合格)</div>
          <div class="title_val">5/7</div>
        </div>
        <div>
          <div class="title_text">专家姓名</div>
          <div class="title_val">XXXX</div>
        </div>
        <div>
          <div class="title_text">日期</div>
          <div class="title_val">2025/02/29-2025/03/31</div>
        </div>
        <el-image class="top_img" lazy :src="detailLogo"></el-image>
      </div>
      <div class="table_box">
        <div class="table_top">
          <span class="table_title"
            >中国兵器工业集团有限公司JP生产现场星级评价</span
          >
          <div class="btn_box">
            <el-button
              :loading="saveStatus"
              class="save_btn"
              @click="save_handle"
              >保存</el-button
            >
            <el-button class="cancel_btn" @click="return_cli">取消</el-button>
          </div>
        </div>
        <el-table
          class="table_item"
          :data="tableData"
          style="width: 100%"
          height="450px"
          header-row-class-name="header_item"
          stripe
          v-loading="tableStatus"
        >
          <el-table-column
            fixed
            align="center"
            type="index"
            label="序号"
            width="60"
          >
          </el-table-column>
          <el-table-column fixed align="left" prop="a" label="要素">
          </el-table-column>
          <el-table-column width="180" align="center" prop="b" label="要求">
          </el-table-column>
          <el-table-column width="180" align="center" prop="c" label="评价项点">
          </el-table-column>
          <el-table-column
            width="180"
            align="center"
            prop="d"
            label="检查评价方式"
          >
          </el-table-column>
          <el-table-column width="180" align="center" prop="e" label="有关说明">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="260"
            align="center"
            label="评价结果"
          >
            <template slot-scope="scope">
              <Radio-group
                v-model="scope.row.f"
                @on-change="radio_change(scope.row.f)"
              >
                <Radio
                  v-for="(item, index) in resList"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</Radio
                >
                <!-- <Radio label="爪哇犀牛"></Radio>
                <Radio label="印度黑羚"></Radio> -->
              </Radio-group>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="150"
            align="center"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="scope.row.g"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="拍照" width="90">
            <template slot-scope="scope">
              <el-button
                class="edit_btn"
                type="info"
                size="mini"
                @click="handle_cli(scope.row)"
                >操作</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagi_box">
          <el-pagination
            background
            :page-sizes="[10, 30, 50]"
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            layout="total, prev, pager, next, sizes, jumper"
            :total="page.totals"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <detailDialog
      v-if="detailDialogVisible"
      :visible="detailDialogVisible"
      @plan_upload="handle_upload"
    ></detailDialog>
  </div>
</template>

<script>
import detail_logo from "@/static/image/detail_logo.png";
import detailDialog from "./detail_dialog";
export default {
  components: { detailDialog },
  data() {
    return {
      detailLogo: detail_logo,
      detailDialogVisible: false,
      tableStatus: false,
      saveStatus: false,
      resList: [
        { label: "合格", value: 1 },
        { label: "不合格", value: 2 },
        { label: "不及时", value: 3 },
      ],
      page: { pageIndex: 1, pageSize: 10, totals: 0 },
      tableData: [
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
        { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 },
      ],
    };
  },
  created() {
    this.getQuery();
  },
  methods: {
	  return_cli(){
		  uni.navigateTo({
		  	url: '/pages/index/index'
		  });
	  },
    save_handle() {
      this.saveStatus = true;
      setTimeout(() => {
        this.saveStatus = false;
      }, 1000);
    },
    handle_upload(val) {
      this.detailDialogVisible = val;
    },
    getQuery(type) {
      if (type != "page") {
        this.page.pageIndex = 1;
      }
      this.tableStatus = true;
      setTimeout(() => {
        this.page.totals = this.tableData.length;
        this.tableStatus = false;
      }, 1000);
    },
    radio_change(val) {
      console.log(val);
    },
    handle_cli() {
      this.detailDialogVisible = true;
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.getQuery("page");
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getQuery("page");
    },
  },
};
</script>

<style lang="scss" scoped>
.detail_page {
  // width: 16px;
  height: 100vh;
  padding: 16px;
  background: #d9d9d9;
  .page_content {
    background: #fff;
  }
  .info_box {
    // margin-bottom: 16px;
    padding: 0 16px;
    height: 84.5px;
    position: relative;
    // line-height: 84.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    background: linear-gradient(rgba(24, 144, 255, 0.2), rgba(24, 144, 255, 0));
    border-bottom: 1px solid #1890ff00;
    .title_text {
      color: #797a80;
      margin-bottom: 6px;
    }
    .title_val {
      color: #1f1f1f;
    }
    .top_img {
      width: 101.5px;
      height: 84px;
      position: absolute;
      top: 0;
      right: 0;
      .el-image__inner {
        width: 100%;
        height: 100%;
      }
    }
  }
  ::v-deep .table_box {
    p {
      margin: 0;
      padding: 0;
    }
    .table_top {
      text-align: center;
      position: relative;
      padding: 28px 0 20px;
      .table_title {
        font-family: YouSheBiaoTiHei;
        font-style: italic;
        font-weight: 400;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #1f1f1f;
      }
      .btn_box {
        position: absolute;
        right: 16px;
        top: 24px;
        display: flex;
        .save_btn,
        .cancel_btn {
          width: 96px;
          height: 32px;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50px;
        }
        .save_btn {
          background: #1890ff;
          color: #fff;
        }
        .cancel_btn {
          background: #eff1f5;
          border: 1px solid #c2c4cc;
          color: #1f1f1f;
        }
      }
    }
    .table_item .el-table__row--striped {
      .el-table__cell {
        background: rgba(24, 144, 255, 0.05);
      }
    }
    .table_item {
      .header_item {
        .el-table__cell {
          color: #1f1f1f !important;
          font-size: 16px;
          background: rgba(24, 144, 255, 0.2);
        }
      }
    }
    .el-table__cell {
      padding: 10px 0 !important;
    }
    .edit_btn {
      width: 56px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1890ff;
      font-size: 16px;
      border-radius: 32px;
      background: #e8f4ff;
      border-color: #a3d3ff;
    }
    .pagi_box {
      // margin-top: 12px;
      text-align: right;
      padding: 24px 14px 16px 0;
      font-size: 16px;
      color: #494a4d;
      .el-pagination__jump {
        margin-left: 0;
        color: #494a4d;
      }
      .el-pagination__sizes,
      .el-pagination__total {
        color: #494a4d;
      }
      .el-pager {
        color: #494a4d;
        .active {
          background-color: #fff;
          color: #1890ff;
          border: 1px solid #1890ff;
        }
      }
    }
  }
}
</style>